<template>
    <ul>
        <!-- <li>
            <div class="mybooks_li">
                <div class="li_img">
                    <img src="../img/冬日漫步.jpg" alt="">
                </div>
                <div class="li_text">
                    <div class="li_text_booksname">失败的额外收益·节选</div>
                    <div class="author_name">J·K·罗琳</div>
                </div>
            </div>
        </li> -->
        <li v-for="(item,index) in this.mybooks" :key="index">
            <div class="mybooks_li">
                <div class="li_img" @click="ToBook(item.id,item.bookname)">
                    <img :src="mybooks[index].bookbg" alt="">
                </div>
                <div class="li_text">
                    <div class="li_text_booksname">{{ mybooks[index].bookname }}</div>
                    <div class="author_name">{{mybooks[index].bookauthor}}</div>
                    <div class="del_book" @click="deleteBook(mybooks[index].id)">
                    <button>删除图书</button>
                </div>
                </div>

            </div>
            <hr>
        </li>
    </ul>
</template>
<style>
.mybooks_li {
    text-align: left;
    width: 90vw;
    margin: 0 5vw;
}
ul{
  margin-bottom: 60px;
}

.li_img {
    display: inline-block;
    left: 0;
    width: 20vw;
    height: 17vh;
    background-size: cover;
    object-fit: cover;
}

.li_img img {
    object-fit: cover;
    width: 20vw;
    height: 17vh;
    float: left;
}
.author_name{
    font-size: 12px;
    
}
.li_text {
    width: 60vw;
    display: inline-block;
    font-size: 8px;
    top: 0;
    position: relative;
    margin-left: 5vw;
    font-size: 18px;
}
.li_text_booksname{
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    top: 0px;
}
li{
    margin: 10px 0;
}
li hr{
    width: 90%;
    margin: 0 auto;
}
.del_book{
display: inline-block;
top: -3vh;
right: -40vw;
width: 20vw;
height: 5vh;
position: relative;
}
.del_book button{
    font-size: 14px;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: rgb(255, 81, 0);
    color: white;
    border-radius: 14%;
}
</style>

<script>
// 读取书架中的数据
let sky_books = JSON.parse(localStorage.getItem('SKY_BOOKS'));
export default {
    name: "mybooks1View",
    components: {
    },
    data() {
        return {
            mybooks:{
            bookid:[],
            bookname:[],
            bookbg:[],
            bookauthor:[],
            }

        }
    },
    created() {
        this.mybooks=sky_books;
        console.log(this.mybooks);
    },
    methods: {
        // 删除书籍
        deleteBook(id){
            let arr = sky_books.filter(item => item.id != id);
            sky_books = arr;
            let str = JSON.stringify(sky_books);
            localStorage.setItem('SKY_BOOKS', str);
            this.mybooks=sky_books;
        },
        // 跳转书籍详情页
        ToBook(id,bookname){
            this.$router.push({
                path: '/tobook',
                query: {
                    id: id,
                    bookname:bookname
                }
            })
        }
    }
}
</script>